<template>
	<!-- 退款详情 -->
	<view class="warp">
		<c-navBar title="退款详情" is-tran ></c-navBar>
		<!-- <d-navBar title="我的订单" isSeat leftFn @leftFn="goBack"></d-navBar> -->
		<view v-if="refundData.status == 0" class="schedule">
			<view class="sc-title">请等待平台处理</view>
			<view class="sc-text">剩余{{timeData}}</view>
		</view>
		<view v-if="refundData.status == 2" class="schedule">
			<view v-if="refundData.reviewStatus == 2" class="sc-title">退款申请已拒绝</view>
			<view v-else-if="refundData.refundStatus == 2" class="sc-title">拒绝退款</view>
			<view class="sc-text">如有疑问前联系平台</view>
		</view>
		<view v-if="refundData.status == 1" class="schedule">
			<view class="sc-title">退款申请已通过，待平台收到商品后处理退款</view>
			<view class="sc-text" v-if="refundData.logisticsNumber"></view>
			<view class="sc-text" v-else>请在{{timeData}}内寄回商品</view>
		</view>
		<view v-if="refundData.status == 3" class="schedule">
			<view class="sc-title">退款成功</view>
			<view class="sc-text">支付金额/积分已原路返回至你的账户</view>
		</view>
		<view v-if="refundData.status == 4" class="schedule">
			<view class="sc-title">退款申请已撤销</view>
			<view class="sc-text">如有疑问请联系平台</view>
		</view>
		<!-- <view class="top"></view> -->
		<view v-if="refundData.status == 0" class="tips">
			<p style="padding:32rpx;box-sizing: border-box;">你已发起退款申请，请耐心等待平台处理</p>
		<view class="line"></view>
		</view>
		<view v-if="refundData.status == 2 && refundData.reviewRemarks && refundData.reviewStatus == 2" class="tips">
		<p style="padding:32rpx;box-sizing: border-box;" >{{refundData.reviewRemarks}}</p>
		<view class="line"></view>
		</view>
		<view v-if="refundData.status == 2 && refundData.refundRemarks && refundData.refundStatus == 2" class="tips">
		<p style="padding:32rpx;box-sizing: border-box;" >{{refundData.refundRemarks}}</p>
		<view class="line"></view>
		</view>
		
		

		<view v-else-if="refundData.status == 1" class="tips2">
			<view class="">
				<view class="ti-title">寄件地址</view>
				<view class="ti-info">{{refundData.address.userName}} {{refundData.address.phone}}</view>
				<view class="ti-address">
					{{refundData.address.province+refundData.address.city+refundData.address.area+refundData.address.address}}
				</view>
			</view>
			<view class="tips2-p1" @click="copyInfo">
				复制
			</view>
		</view>
		<!-- <view class="line"></view> -->
		
			
				<view class="expense">
					<view class="title" style="border-radius: 16rpx 16rpx 0rpx 0rpx;">
						包装完好无损，不影响二次销售
					</view>
					<view class="ex-box">
						<view class="ex-title">退货原因</view>
						<view class="ex-text">{{refundData.reasonLabel}}</view>
					</view>
					<view class="ex-box">
						<view class="ex-title">退款金额</view>
						<view class="ex-text">￥{{refundData.amount?refundData.amount:0}}</view>
					</view>
					<view class="ex-box">
						<view class="ex-title">退还积分</view>
						<view class="ex-text">{{refundData.rattan?refundData.rattan:0}}积分</view>
					</view>
					<view class="ex-box">
						<view class="ex-title">申请时间</view>
						<view class="ex-text">{{refundData.createTime}}</view>
					</view>
					<view v-if="refundData.status == 3" class="ex-box">
						<view class="ex-title">退款时间</view>
						<view class="ex-text">{{refundData.refundTime}}</view>
					</view>
					<view class="ex-remark">
						<view class="ex-title fw">退货说明</view>
						<view class="ex-area">{{refundData.remark?refundData.remark:'暂无退货说明'}}</view>
					</view>
					<view class="line"></view>
					<view class="ex-remark">
						<view class="ex-title fw">上传的图片</view>
						<view class="ex-inner" v-if="refundData.imgList">
							<image @click="preViewImg(i)" v-for="(v,i) in refundData.imgList" :key="i" class="upload-img"
								:src="v" mode=""></image>
						</view>
						<view class="ex-inner" v-else>
							未上传图片
						</view>
				
					</view>
				</view>
			   <view class="line-one">
			   	
			   </view>
		
		
		
		<view v-if="refundData.logisticsNumber">
			<view class="line"></view>
			<view class="logistics-box">
				<view class="logistics-title">物流信息</view>
				<view class="logistics-text">
					<p>快递公司</p>
					<p style="margin-left: 40rpx; color: #333333;">{{refundData.logisticsName}}</p>
				</view>
				<view class="logistics-text" style="border-top: 1rpx solid #E6E6E6;">
					<p>快递单号</p>
					<p style="margin-left: 40rpx; color: #333333;">{{refundData.logisticsNumber}}</p>
				</view>
			</view>
			
		</view>

		<view v-if="refundData.status == 0 && !refundData.logisticsNumber" class="bottom_btn">
			<view class="btn" style="background-color: #2AD03D;" @click="cancellation(1)">撤销退款</view>
		</view>
		<view v-if="refundData.status == 1 && !refundData.logisticsNumber" class="bottom_btn">
			<view class="btn" style="background-color: #2AD03D;" @click="cancellation(2)">填写物流信息</view>
		</view>
		<!-- <view v-if="refundData.status == 2" class="bottom_btn">
			<view class="btn" style="background-color: #2AD03D;" @click="aginPlay()">再次申请</view>
		</view> -->
		<!-- <view v-if="refundData.logisticsNumber" class="bottom_btn">
			<view class="btn" style="background-color: #2AD03D;" @click.stop="viewLogistics">查看退货物流详情</view>
		</view> -->
		<!-- 		<view v-if="refundData.logisticsNumber" style="width:690rpx ;height: 48rpx;">
			
		</view> -->


		<c-imgTipsPop :show="isPopShow" :img="popImg" title='申请撤销成功'  @close="confirmBtn"></c-imgTipsPop>
	</view>
</template>

<script>
	// import tipsPop from '@/components/tipsPop/index.vue'
	export default {
		components: {
			// tipsPop
		},
		data() {
			return {
				isPopShow: false,
				tips: {
					font: '申请撤销成功',
					img: '../../static/img/gou.png',
					color: '#FF8326'
				},
				option: {},
				refundData: {},
				timer: null,
				timer1:null,
				timeData: '',
				popImg: require('../../../static/tabbar/gou.png'),
			}
		},
		onLoad(option) {
			this.option = option
			console.log(option, "option12");
			this.getInitiateRefundDetail()
			
		},
		onShow() {
			this.getInitiateRefundDetail()
		},
		methods: {
			// 回到订单详情
			// goBack() {
			// 	uni.reLaunch({
			// 		url: '/pages/order/pages/orderDetails'
			// 	})
			// },
			// 再次申请
			aginPlay(){
				//单个商品
				if(this.type=1){
					uni.navigateTo({
						url:'/pages/order/pages/applyGoods?goodId='+ this.refundData.id
					})
				}
				
			},
			// 复制
			copyInfo() {
				uni.setClipboardData({
					data: this.refundData.address.userName + this.refundData.address.phone + this.refundData
						.address.province + this.refundData.address.city + this.refundData.address.area + this
						.refundData.address.address,
					success() {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						})
					},
					fail(err) {
						console.log(err, 'err');
					}
				})
			},
			// 获取退款详情
			async getInitiateRefundDetail() {
				const {

					data

				} = await this.$api.initiateRefundDetail({
					id: this.option.id
				})
				console.log('退款data', data);
				this.refundData = data
				if (data.imgs) {
					this.refundData.imgList = data.imgs.split(',')
				}
				if (this.refundData.status == 0) {
					this.countdown(this.refundData.createTime, 3)
				} else if (this.refundData.status == 1) {
					this.countdown(this.refundData.reviewTime, 5)
				}
			},
			// 预览图片
			preViewImg(current) {
				// let newImgs = this.refundData.imgList.map(item => this.vuex_imgUrl + item)
				uni.previewImage({
					current,
					urls: this.refundData.imgList,
				});
			},
			// 处理剩余时间
			countdown(date, num) {
				// 计算三天后的时间
				let newDate = new Date(date)
				const threeDaysLater = new Date(newDate.getTime() + num * 24 * 60 * 60 * 1000);
				this.timer = setInterval(() => {
					this.forTime(threeDaysLater)
				}, 1000)
			},
			forTime(threeDaysLater) {
				// 获取剩余的日期和时间  
				let days = Math.floor((threeDaysLater - new Date()) / (24 * 60 * 60 * 1000));
				let hours = Math.floor((threeDaysLater - new Date()) / (60 * 60 * 1000)) % 24;
				let minutes = Math.floor((threeDaysLater - new Date()) / (60 * 1000)) % 60;
				let seconds = Math.floor((threeDaysLater - new Date()) / 1000) % 60;

				// 格式化倒计时  
				if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
					clearInterval(this.timer)
				}
				this.timeData = `${days}天${hours}小时${minutes}分钟${seconds}秒`;
			},
			// 撤销退款/填写物流信息
			cancellation(id) {
				// 撤销退款
				if (id == 1) {
					uni.showModal({
						title: '提示',
						content: '是否确定撤销退款',
						confirmColor: '#2AD03D', // 删除字体的颜色
						cancelColor: '#606166', // 取消字体的颜色  
						success: (res) => {
							if (res.confirm) {
								// console.log('用户点击确定');
								this.$api.revokeRefund({
									id: this.refundData.id
								}).then(res => {
									console.log(res);

									this.isPopShow = true
								this.timer1 = setInterval(()=>{
										uni.navigateBack()
									},3000)
										// this.isPopShow = false
									clearInterval(this.timer1)	
									

								})
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				} else {
					// 填写物流信息
					uni.navigateTo({
						url: "/pages/order/pages/deliverGoods?id=" + this.option.id
					})
				}
			},
			confirmBtn() {
				this.isPopShow=false
				uni.navigateBack()
			},
			// 查看物流
			viewLogistics() {
				// console.log('val', val);
				uni.navigateTo({
					url: '/pages/order/pages/logisticsInformation?id=' + this.option.id
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.line-one{
		width: 750rpx;
		height:160rpx ;
	}
	.logistics-box{
		width: 750rpx;
		height: 270rpx;
		background-color: #FFFFFF;
		padding-left: 32rpx;
		box-sizing: border-box;
		.logistics-title{
			padding-top: 32rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.logistics-text{
			width: 100%;
			height: 92rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
	.line {
		width:750rpx;
		height: 8rpx;
		background: #F7F7F7;
	}

	.warp {
		width: 100vw;
		min-height: 100vh;
		padding-top: 200rpx;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.schedule {
		// background: #FFFFFF;
		// height: 180rpx;
		width: 750rpx;
		padding: 30rpx 32rpx;

		.sc-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #1A1A1A;
		}

		.sc-text {
			margin-top: 18rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
		}
	}

	.top {
		width: 750rpx;
		height: 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		margin-top: -90rpx;
	}

	.tips {
		font-size: 32rpx;
		color: #009E42;
		// padding: 0 32rpx 32rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-color: #FFFFFF;
	}

	.tips2 {
		padding: 32rpx 32rpx 28rpx;
		border-bottom: 8rpx solid #F6F6F6;
		// margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;

		.tips2-p1 {
			width: 72rpx;
			height: 36rpx;
			background: #E6F6E9;
			border-radius: 20rpx;
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #2AD03D;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.ti-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #1A1A1A;

			text {
				color: #FF8326;
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		.ti-info {
			font-size: 28rpx;
			color: #1A1A1A;
			margin: 10rpx 0 14rpx;
		}

		.ti-address {
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
		}
	}

	.expense {
		// width: 750rpx;
		// height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)-700rpx);
		// height: 900rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-color: #FFFFFF;

		.title {
			padding: 24rpx 32rpx;
			border-bottom: 1rpx solid #e6e6e6;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.ex-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 32rpx;
			border-bottom: 1rpx solid #e6e6e6;

			&:nth-child(1) {
				padding: 0 32rpx 24rpx;
			}

			&:nth-last-child(1) {
				border-bottom: 8rpx solid #e6e6e6;
			}

			.ex-text {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

		.ex-title {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.ex-remark {
			padding: 32rpx 32rpx 0;

			.ex-area {
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				margin-top: 12rpx;
				padding-bottom: 24rpx;
				box-sizing: border-box;
			}

			.ex-inner {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				padding-bottom: 20rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;

				.upload-img {
					width: 160rpx;
					height: 160rpx;
					margin: 0 20rpx 20rpx 0;
				}
			}
		}
	}
</style>